<template>
  <div class="cityList">
    <!-- 导航 -->
    <myNav :title="title" @click="$router.push('/layout')" />
    <!-- 城市列表 -->
    <div class="container">
      <van-index-bar :index-list="indexList" :sticky="false">
        <van-index-anchor index="#">当前城市</van-index-anchor>
        <van-cell :title="$store.state.area.city" />
        <van-index-anchor index="热">热门城市</van-index-anchor>
        <van-cell
          v-for="(c, index) in hotCityList"
          :key="index"
          :title="c.label"
          @click="chooseCity(c)"
        />
        <div v-for="(item, i) in cityList" :key="i">
          <van-index-anchor :index="i" />
          <van-cell
            v-for="(citem, cindex) in item"
            :key="cindex"
            :title="citem.label"
            @click="chooseCity(citem)"
          />
        </div>
      </van-index-bar>
    </div>
  </div>
</template>

<script>
import { CityListAPI, HotCityAPI } from "@/api";
import myNav from "@/components/myNav.vue";
export default {
  components: {
    myNav,
  },
  data() {
    return {
      title: "城市列表",
      indexList: [],
      hotCityList: [],
      cityIndex: [],
      City: [],
      level: 1,
    };
  },
  mounted() {
    this.getHotcity();
    this.getCity();
  },
  methods: {
    // 获取热门城市
    async getHotcity() {
      try {
        const {
          data: { body },
        } = await HotCityAPI();
        console.log(body);
        this.hotCityList = body;
      } catch (error) {
        console.log(error);
      }
    },
    // 获取城市
    async getCity() {
      try {
        const {
          data: { body },
        } = await CityListAPI({
          level: this.level,
        });
        console.log(body);
        this.City = body;
        this.cityIndex = this.CityIndex(body);
        this.indexList = ["#", "热", ...this.cityIndex];
        // console.log(this.cityIndex);
      } catch (error) {
        console.log(error);
      }
    },
    // 封装城市列表索引方法
    CityIndex(arr) {
      const newArr = arr.reduce((pre, cur) => {
        pre.push(cur.short.charAt(0).toUpperCase());
        return pre;
      }, []);
      return [...new Set(newArr.sort())];
    },
    chooseCity(obj) {
      this.$store.commit("area/SET_AREA", obj);
      this.$router.push("/layout");
    },
  },
  computed: {
    cityList() {
      let list = {};
      this.cityIndex.forEach((item) => {
        list[item] = [];
        this.City.forEach((val) => {
          let firstLetter = val.short.charAt(0).toUpperCase();
          if (firstLetter == item) {
            list[item].push(val);
          }
        });
      });
      return list;
    },
  },
};
</script>

<style scoped lang="less">
.cityList {
  :deep(.van-nav-bar .van-icon) {
    color: #fff;
    font-size: 18px;
  }
  :deep(.van-nav-bar__title) {
    color: #fff;
    font-size: 18px;
  }
  .container {
    margin-top: 48px;
    :deep(.van-index-bar__sidebar) {
      top: 55%;
    }
  }
  :deep(.van-index-anchor) {
    color: #999;
  }
  :deep(.van-cell) {
    color: #333;
    font-size: 16px;
  }
  :deep(.van-index-bar__index) {
    font-size: 14px;
    line-height: 30px;
    padding: 0 8px 0 8px;
  }
  :deep(.van-index-bar__index--active) {
    color: #fff;
    background: #21b97a;
    border-radius: 50%;
  }
}
</style>
